<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
import roadJson from "@/assets/data/geojson/road.json"
export default {
    name: 'SpecialEffects',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                // terrainProvider: new window.Cesium.CesiumTerrainProvider({
                //     url: 'http://data.mars3d.cn/terrain',
                //     requestWaterMask: true,
                //     requestVertexNormals: true
                // }),
                imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://124.128.48.215:8083/tileservice/dsfg_asdxb',
                    layer: 'dsfg_asdxb',
                    style: 'default',
                    format: 'image/png',
                    tileMatrixSetID: 'dsfg_asdxb',
                    tileMatrixLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
                    maximumLevel: 19,
                    tilingScheme: new Cesium.GeographicTilingScheme()
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            window.d3kit = new Cesium.D3Kit(window.viewer)
            window.d3kit.setDefSceneConfig()
            window.d3kit.setBloomLightScene()
            window.viewer.scene.light.intensity = 0.6
            window.viewer.scene.postProcessStages.fxaa.enabled = true

            window.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                url: '/model/Tileset/JN-WhiteModel/tileset.json'
            }));

            window.viewer.camera.setView({
                destination: {
                    "x": -2331056.0273690308,
                    "y": 4563273.390988787,
                    "z": 3786062.3190302034
                },
                orientation: {
                    heading: 0.5168861241825802,
                    pitch: -0.5115656193038052,
                    roll: 0.000032373724042855656
                }
            })


            const roadDataSource = new Cesium.CustomDataSource('road');
            window.viewer.dataSources.add(roadDataSource)
            let features = roadJson.geometries
            features.forEach((feature) => {
                roadDataSource.entities.add({
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray(feature.coordinates.flat().flat()),
                        width: 5,
                        material: new Cesium.PolylineFlowMaterialProperty({
                            color: Cesium.Color.GOLD.withAlpha(1),
                            duration: 80
                        }),
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 20000)
                    }
                });
            });

            roadDataSource.entities.add({
                wall: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                        117.06979794955133, 36.65824464036648, 40,
                        117.07453897982852, 36.658148421157264, 40,
                        117.07423135107351, 36.65476375043068, 40,
                        117.06986945481079, 36.65497844698722, 40,
                        117.06979794955133, 36.65824464036648, 40,
                    ]),
                    material: window.d3kit.getCustomMaterialWall({
                        image: require('@/lib/D3Kit/data/images/Textures/b2.png'),
                        freely: 'vertical',
                        direction: '+',
                        count: 4,
                        color: Cesium.Color.RED,
                        duration: 2000
                    })
                }
            })

            roadDataSource.entities.add({
                wall: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                        117.06877158796242, 36.64885054985045, 40,
                        117.07392666046475, 36.64872433717075, 40,
                        117.07380585623488, 36.64366776522464, 40,
                        117.06842396464549, 36.6439757752421, 40,
                        117.06877158796242, 36.64885054985045, 40,
                    ]),
                    material: window.d3kit.getCustomMaterialWall({
                        image: require('@/lib/D3Kit/data/images/Textures/test1.png'),
                        freely: 'cross',
                        direction: '+',
                        count: 0.0,
                        color: Cesium.Color.BLUE,
                        duration: 5000
                    })

                }
            })



            //拾取坐标
            // const handler = new window.Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
            // handler.setInputAction(function (movement) {
            //     let cartesianPosition = window.viewer.scene.pickPosition(movement.position)
            //     let cartographic = Cesium.Cartographic.fromCartesian(cartesianPosition);
            //     if (cartographic.height < 0) cartographic.height = 0;
            //     let lon = Cesium.Math.toDegrees(cartographic.longitude)
            //         , lat = Cesium.Math.toDegrees(cartographic.latitude)
            //         , height = cartographic.height;
            //     console.log(lon, lat, height)
            // }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);


        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  